<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>见缝插针</title>
  <style type="text/css">
  html,
  body {
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    text-align: center;
    background-color: #aaa;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
  }
  body {
    overflow: visible;
  }
  /* for Android Native Browser bug */
  
  canvas {
    background-color: #aaa;
    vertical-align: middle;
    opacity: 1;
    border-top: solid 1px #000;
  }
  .title {
    font-size: 24px;
    font-family: 微软雅黑, 黑体;
    color: #000;
    letter-spacing: 4px;
    margin-bottom: 4px;
  }
  @media all and (min-width: 480px) and (max-height: 479px) {
    canvas {
      -webkit-transform: translateY(-80px) rotate(-90deg);
      -moz-transform: translateY(-80px) rotate(-90deg);
      transform: translateY(-80px) rotate(-90deg);
      border-top: 0;
      border-right: solid 1px #000;
    }
  }
  </style>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <meta name="Author" content="cxp">
  <meta name="Date" content="2015-02-04">
  <meta name="renderer" content="webkit">
  <!-- for 360 browser -->
</head>

<body>
  <div class="title">见缝插针</div>
  <canvas id="canvas1" width="320" height="480"></canvas>
  <script>
  function MyCtx(t) {
    if (!(this instanceof MyCtx)) return new MyCtx(t);
    if (this.ctx = t.fill ? t : t = (t.getContext ? t : document.querySelector(t)).getContext("2d"), !this.fill) {
      var n = MyCtx.prototype,
        e = {
          moveTo: "M",
          lineTo: "L",
          closePath: "Z",
          beginPath: "B",
          arcTo: "A",
          bezierCurveTo: "C",
          quadraticCurveTo: "Q"
        },
        i = [],
        o = [];
      n.M = n.L = n.Z = n.B = n.A = n.C = n.Q = {};
      for (var c in t)("function" == typeof t[c] ? o : i).push(c);
      i.forEach(function(t) {
        n[t] = function(n) {
          return arguments.length ? (this.ctx[t] = n, this) : this.ctx[t]
        }
      }), o.forEach(function(t) {
        n[t] = function() {
          return this.ctx[t].apply(this.ctx, arguments) || this
        }
      }), Object.keys(e).forEach(function(t) {
        n[e[t]] = n[t]
      })
    }
  }
  var _hmt = _hmt || [];
  ! function(t, e) {
    if (e.match(/\bjsgame\.\w+$/)) {
      var n = t.createElement("script");
      n.src = "//hm.baidu.com/hm.js?fb600209926cf4821e2bd66a9bed7583", t.head.insertBefore(n, t.head.firstChild)
    }
  }(document, location.hostname);
  ! function(t, e, n) {
    function r() {
      return Date.now()
    }

    function i(t) {
      return t %= j, 0 > t ? t + j : t
    }

    function o(t) {
      for (var e, n = G.length; n--;)
        if (e = i(G[n] - t), $ > e || e > j - $) return {
          which: n,
          diff: e
        };
      return !1
    }

    function a(t) {
      var e, n = W.length;
      return e = n >= t ? W[t - 1] : [W[n - 1][0], W[n - 1][1] + t - n], {
        pre: e[0],
        queue: e[1],
        rotateFn: e[2] || (t % 2 ? "anti" : "normal")
      }
    }

    function f(t) {
      for (var e = 0, n = []; t > e; e++) n[e] = j * e / t;
      return n
    }

    function l() {
      var t = localStorage.getItem("aaffuu-cxp");
      if (t) {
        try {
          t = JSON.parse(t)
        } catch (e) {}
        t && t.aa && (V = 0 | t.aa)
      }
    }

    function s() {
      T.save().fillStyle("#aaa").fillRect(0, 0, M, q).restore()
    }

    function c() {
      T.B().arc(B, F, P, 0, j, !1).fill()
    }

    function u(t) {
      var e = B + k * O(t),
        n = F + k * J(t);
      T.B().arc(e, n, E, 0, j, !1).fill(), T.M(B, F).L(e, n).stroke()
    }

    function v(t, e) {
      var n = B + e * O(t),
        r = F + e * J(t);
      T.B().arc(n, r, E, 0, j, !1).fill()
    }

    function m(t, e, n) {
      var r = B + e * O(t),
        i = F + e * J(t);
      T.B().arc(r, i, E, 0, j, !1).fill(), T.save().fillStyle("#fff").fillText(n, r, i, 2 * E).restore()
    }

    function h() {
      for (var t = D, e = K; q - F + E > t && e > 0; t += 30, e--) v(z, t), m(z, t, e)
    }

    function d() {
      T.save().font("bold 18px sans-serif").textAlign("left").fillStyle("#000").fillText("Level: " + V, 10, q - 40).font("bold 48px sans-serif").textAlign("center").fillStyle("#fff").fillText(V, B, F).restore()
    }

    function x() {
      T.save().font("bold 18px sans-serif").textAlign("right").fillStyle("#f00").fillText("\u6302\u4e86\uff01", M - 10, q - 65).fillText("1\u79d2\u540e\u91cd\u65b0\u5f00\u59cb", M - 10, q - 40).restore()
    }

    function p() {
      T.save().font("bold 18px sans-serif").textAlign("right").fillStyle("#060").fillText("\u5b8c\u7f8e\u8fc7\u5173\uff01", M - 10, q - 65).fillText("1\u79d2\u540e\u4e0b\u4e00\u5173", M - 10, q - 40).restore()
    }

    function g() {
      if ("over" != L && "pass" != L) {
        var t = r();
        Q = t;
        var e = H.rotateFn || "normal";
        U = (e && X[e] || X.normal)(t - N), s(), c();
        for (var n = 0; n < G.length; n++) u(G[n] + U);
        h(), "shooting" == L && w(), d(), Y(g)
      }
    }

    function w() {
      var t = z,
        e = D,
        a = k,
        f = a + 2 * E,
        l = (r() - Z) / R;
      l > 1 && (l = 1);
      var s = e - (e - a) * l,
        c = f > s && o(t - U);
      if (c) {
        var m = k * J(c.diff),
          h = k * O(c.diff) + n.sqrt(4 * E * E - m * m);
        v(t, h), L = "over", x(), setTimeout(b, 1e3)
      } else 1 > l ? v(t, s) : (G.push(i(t - U)), u(t), L = "idle", K || (L = "pass", localStorage.setItem("aaffuu-cxp", '{"aa":' + (V + 1) + "}"), p(), setTimeout(b, 1e3)))
    }

    function y() {
      L = "shooting", Z = r(), K--
    }

    function S(t) {
      if ("idle" == L) {
        C || ["mousedown", "touchstart", "MSPointerDown", "pointerdown", "keydown"].forEach(function(n) {
          n != t.type && e.removeEventListener(n, S, !1)
        });
        switch (t.type) {
          case "mousedown":
            if (t.button > 0) return;
            y();
            break;
          case "touchstart":
          case "MSPointerDown":
          case "pointerdown":
          case "keydown":
            y();
            break;
          default:
            return
        }
        t.preventDefault()
      }
    }

    function b() {
      L && "over" != L && "pass" != L || ("pass" == L && V++, L = "idle", H = a(V), G = f(H.pre), _ = G.concat(), K = H.queue, N = r(), Q = r(), g())
    }
    var T, A, M, q, B, F, P, E, k, D, L, C, I, R, j, z, O, J, N, Q, Z, $, _, G, H, K, U = 0,
      V = 1,
      W = [
        [3, 6],
        [5, 6],
        [6, 6],
        [7, 6],
        [9, 7],
        [9, 9],
        [8, 12],
        [9, 12],
        [7, 12],
        [8, 13]
      ],
      X = {};
    X.normal = function(t) {
      return j * (t % I) / I
    }, X.anti = function(t) {
      return j * (1 - t % I / I)
    }, P = 50, E = 10, k = 140, I = 5e3, D = 200, R = 100, L = "", j = 2 * n.PI, z = n.PI / 2, O = n.cos, J = n.sin, T = MyCtx("#canvas1"), A = T.ctx, M = A.canvas.width, q = A.canvas.height, B = M / 2, F = .4 * q, T.fillStyle("#000").strokeStyle("#000"), T.font("12px sans-serif").textAlign("center").textBaseline("middle"), _ = [0, z], G = _.concat(), $ = 4 * n.asin(E / 2 / k), ["mousedown", "touchstart", "MSPointerDown", "pointerdown", "keydown"].forEach(function(t) {
      e.addEventListener(t, S, !1)
    });
    var Y = t.requestAnimationFrame || t.webkitRequestAnimationFrame || t.mozRequestAnimationFrame || t.msRequestAnimationFrame;
    l(), b()
  }(window, document, Math);
  </script>
</body>

</html>
